<script setup lang="ts">
import { PlusSearch, type PlusColumn } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { ref } from "vue";
import { useColumns } from "./record_columns";
const props = defineProps({
  actId: {
    type: Number,
    default: 0
  }
});

const searchColumns: PlusColumn[] = [
  {
    label: "订单ID",
    width: 200,
    prop: "orderId",
    valueType: "input-number",
    fieldProps: {
      controls: false
    },
    tooltip: "请输入搜索订单ID"
  },
  {
    label: "支付方式",
    width: 100,
    labelWidth: 120,
    prop: "wallet",
    valueType: "select",
    options: [
      { label: "余额", value: 0 },
      { label: "收益", value: 1 },
      { label: "积分", value: 2 },
      { label: "消费券", value: 3 }
    ]
  },
  {
    label: "流水类型",
    width: 100,
    labelWidth: 120,
    prop: "type",
    valueType: "select",
    options: [
      { label: "购买设备产品", value: 0 },
      { label: "管理直推收益", value: 1 },
      { label: "管理平级收益", value: 2 },
      { label: "管理收益", value: 3 },
      { label: "转账", value: 4 },
      { label: "节点分红", value: 5 },
      { label: "流量等级收益(设备等级)", value: 6 },
      { label: "直推流量收益", value: 7 },
      { label: "平级流量收益", value: 8 },
      { label: "流量收益", value: 9 },
      { label: "后台操作", value: 10 },
      { label: "提现", value: 11 },
      { label: "转账", value: 12 },
      { label: "领取流水收益", value: 13 },
      { label: "充值", value: 14 },
      { label: "购买商品", value: 15 },
      { label: "合伙人收益", value: 16 },
      { label: "参与盲盒", value: 17 },
      { label: "定投(购买算力下单)", value: 18 },
      { label: "定投收益(算力回报金额)", value: 19 },
      { label: "收益到期退回", value: 20 },
      { label: "用户购买买商品下单", value: 21 },
      { label: "用户下单购买会议或者旅游产品下单", value: 22 },
      { label: "会议或者旅游产品下单退回", value: 23 },
      { label: "完成任务，领取奖励", value: 23 },
      { label: "提现添加", value: 24 }
    ]
  },
  {
    label: "是否本月",
    prop: "thisMonth",
    labelWidth: 120,
    valueType: "select",
    options: [
      {
        label: "否",
        value: 0
      },
      {
        label: "是",
        value: 1
      }
    ]
  }
];

const defaultSearchState = ref({ thisMonth: 1 });
const searchValue = ref({ thisMonth: 1 });

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  onSizeChange,
  loadData,
  onKeywordChange,
  onCurrentChange
} = useColumns(props.actId);

const handleSearch = (value: any) => {
  console.log(value, "search");
  onKeywordChange(value);
};
const handleReset = value => {
  console.log("reset", value);
  onKeywordChange(value);
};
const handleChange = (value: any, target: any) => {
  console.log("change", value);
  if (target.prop == "orderId") {
    return;
  }
  onKeywordChange(value);
};
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>个人流水</h3>
        </template>
        <PlusSearch
          v-model="searchValue"
          :default-values="defaultSearchState"
          class="mt-5"
          :columns="searchColumns"
          :hasUnfold="false"
          @search="handleSearch"
          @change="handleChange"
          @reset="handleReset"
        />
      </ElPageHeader>
    </template>
    <pure-table
      ref="tableRef"
      showOverflowTooltip
      border
      :adaptive="false"
      :adaptiveConfig="adaptiveConfig"
      row-key="id"
      alignWhole="center"
      :loading="loading"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
    />
  </ElCard>
</template>

<style scoped></style>
